<template>
  <Row class="layout-content-body">
    <dtable :columns="columns"
            :dataAll="dataAll"
            :dataShow="dataShow"
            :loading="loading"
            add op
            @refresh="getall()"
            @add="add"
            @del="del"
            @edit="edit" ></dtable>
    <Modal
      title="资源信息"
      v-model="editData"
      :loading="loading"
      :mask-closable="false" class="editm"
      @on-ok="asyncOK"
      @on-cancel="asyncCancel">
      <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Form-item label="名称" prop="Name">
          <Input v-model="formItem.Name" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="简称" prop="Abbr">
          <Input v-model="formItem.Abbr" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="系统标题" prop="Title">
          <Input v-model="formItem.Title" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="系统图标" prop="Logo">
          <Input v-model="formItem.Logo" placeholder="请输入" :icon="formItem.Logo"></Input>
        </Form-item>
        <Form-item label="存储限制（MB）" prop="Userlimit">
          <Input v-model.number="formItem.Userlimit"  placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="联系人" prop="Contact">
          <Input v-model="formItem.Contact" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="电话" prop="Phone">
          <Input v-model="formItem.Phone" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="状态" prop="Status">
          <Radio-group v-model.number="formItem.Status">
            <Radio label="1">启用</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="说明" prop="Remark">
          <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
          </Input>
        </Form-item>
      </Form>
    </Modal>
  </Row>
</template>
<script>
  import dtable from '../../components/table/dtable.vue'
  export default{
    data(){
      return {
        loading:  false,//数据刷新遮罩层
        columns: [
          {
            title: '名称',
            key: 'Name',
            width:280,
          },
          {
            title: '系统标题',
            key: 'Title',
          },
          {
            title: '存储限制（MB）',
            key: 'Userlimit',
          },
          {
            title: '联系人',
            key: 'Contact',
          },
          {
            title: '联系电话',
            key: 'Phone',
          },
          {
            title: '状态',
            key: 'Sname',
            sortable: true,
          }
        ],//表格样式
        dataAll:[],//表格数据来源
        dataShow: true,//是否显示表格数据查看表单
        editData: false,//显示编辑表单
        formItem: {
          Name: '',
          Abbr: '',
          Logo: '',
          Pid:'',
          Title: '',
          Userlimit:99999,
          Status: 1,
          Contact: '',
          Phone:'139',
          Remark: ''
        },//数据编辑表单
        ruleValidate: {
          Name: [
            {required: true, message: '名称不能为空', trigger: 'blur'}
          ],
          Title: [
            {required: true, message: '系统标题不能为空', trigger: 'blur'},
          ],
          Contact: [
            {required: true, message: '联系人不能为空', trigger: 'change'}
          ],
//          Pid: [
//            {type: 'number',required: true, message: '联系电话不能为空', trigger: 'change'}
//          ],
          Phone: [
            {required: true, message: '联系电话不能为空', trigger: 'change'}
          ],
        },//数据编辑表单验证规则
        addid: 0,//0为修改模式，1为添加模式
       }
    },
    components: {
      dtable,
    },
    computed: {
//      过滤数据
      filiterTableDate(){
        let e = this.dataAll.slice()
        let keys = this.searchKey
        let filterData = function (element) {
          if (keys === "") {
            return true
          }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true
            }
          }
          return false
        }
        let fdata = e.filter(filterData)
        this.total = fdata.length
        return fdata
      },
//      当前显示数据
      curTableData() {
        let from = this.pageSize * (this.current - 1)
        let to = from + this.pageSize
        return this.filiterTableDate.slice(from, to)
      },
//      父组织名称
      parentRes() {
        let pr = [{Id: 0, Name: "顶级组织"}]
        for (let e in this.dataAll) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            })
        }
        return pr
      },
      //状态数据转换
      fStauts(){
        if(this.formItem.Status===1){
            return true
        }else {
            return false
        }
      }
    },
    methods: {
      //     获取资源名称
      getNameById(value) {
        let rname = ""
        if (value || '') {
          let rv = this.dataAll.filter((col, index) => col.Id === value)
          rname = rv[0].Name
        }
        return rname
      },
      getall (){
        this.loading = true
        this.$api.getOrganization().then(res => {
          if (!res.error) {
            this.dataAll = res.Data
            console.log( this.dataAll)
            this.total = (res.Data).length
          } else {
            this.$Message.error(res.message)
          }
        })
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      },
      edit(index){
        this.addid = 0
        this.formItem = index
        this.editData = true
      },
      add(){
        this.addid = 1
        this.$refs['editForm'].resetFields()
        this.editData = true
      },
      asyncOK(){
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            if (this.addid === 0) {
              this.$api.updateOrganization(this.formItem).then(res => {
                if (!res.error) {
                  this.getall()
                  this.$Message.success(res.message)
                } else {
                  this.$Message.error(res.message, 4)
                }
              }, err => {
                this.$Message.error(res.message, 4)
              })
            } else if (this.addid === 1) {
              this.$api.addOrganization(this.formItem).then(res => {
                if (!res.error) {
                  this.getall()
                   console.log(res.data)
                  this.$Message.success(res.message)
                } else {
                  this.$Message.error(res.message, 4)
                }
              }, err => {
                this.$Message.error(res.message, 4)
              })
            }
            setTimeout(() => {
              this.editData = false;
            }, 1000);
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
        this.$refs['editForm'].resetFields()
      },
      asyncCancel(){
        this.$refs['editForm'].resetFields()
        this.getall()
      },
      del(row){
        this.$api.deleteOrganization(row).then(res => {
          if (!res.error) {
            this.getall()
            this.$Message.success(res.message)
          } else {
            this.$Message.error(res.message, 4)
          }
        }, err => {
          this.$Message.error(res.message, 4)
        })
      }
    },
    mounted (){
      let self = this
      self.getall()
    }
  }
</script>
